<template>
 <el-container style="height: 800px; border: 1px solid #eee">
  <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
    <el-menu :default-openeds="['1', '3']">
      <el-submenu index="1">
        <template slot="title"><i class="el-icon-message"></i>导航一</template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="1-1" v-on:click="sear">查询全部</el-menu-item>
          <!-- <el-menu-item index="1-2">选项2</el-menu-item> -->
        </el-menu-item-group>
     
        
      </el-submenu>
    </el-menu>
  </el-aside>
  
  <el-container>
    <router-view/>
    <el-header  >
      <el-dropdown>
        <div >
        <div style="float: left;">
          <el-input v-model="inname" style="width:auto" placeholder="根据姓名查询"></el-input>
        <el-button type="primary" size="small"  icon="el-icon-search" v-on:click="btname">搜索</el-button>
        </div>
        <div style="float: left; margin-left: 10px;">
          <el-input v-model="inoaid" style="width:auto" placeholder="根据流水号查询"></el-input>
        <el-button type="primary" size="small"  icon="el-icon-search" v-on:click="btoaid">搜索</el-button>
        </div>
        <div style="float: left;  margin-left: 10px;">
          <el-input v-model="incontent" style="width:auto" placeholder="根据原内容查询"></el-input>
        <el-button type="primary" size="small"  icon="el-icon-search" v-on:click="btcontent"> 搜索</el-button>
        </div>
        
        <div style="float: left;  margin-left: 10px;">
          <el-input v-model="innote" style="width:auto" placeholder="根据关键字查询"></el-input>
        <el-button type="primary" size="small"  icon="el-icon-search" v-on:click="btnote">搜索</el-button>
        </div>
        
        
      </div>
      </el-dropdown>

    

    </el-header>
    
    <el-main>
     
      <el-table :data="tableData" style=" margin-top: 10px;">
        <el-table-column prop="setDate" label="日期" width="140">
        </el-table-column>
        <el-table-column prop="oaid" label="OA流水号" width="220">
        </el-table-column>
        <el-table-column prop="content" label="原内容" width="220">
        </el-table-column>
        <el-table-column prop="recontent" label="修改内容" width="220">
        </el-table-column>
        <el-table-column prop="name" label="修改人员" width="220">
        </el-table-column>
        <!-- <el-table-column prop="address" label="地址">
        </el-table-column> -->
        <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看详情</el-button>
        <!-- <el-button type="text" size="small">删除</el-button> -->
      </template>
    </el-table-column>
      </el-table>
    </el-main>
  </el-container>
</el-container>



</template>

<script>
  export default {
    data() {
      
      const item = {
        date: '',
        name: '',
        address: '',
      };
      return {
        // tableData: Array(20).fill(item),
        tableData: [],

        inname: '',
        inoaid: '',
        incontent: '',
        innote: '',

      }
    },
    methods:{
      sear:function(e){
        this.$axios({
            url: "/record/list",
            method: "get", 
          })
            .then((res) => {
              console.log("cch");

              console.log(res.data);
              console.log(res.data.message);
              console.log(res.data.data);  
              console.log(this.list);
              this.tableData=res.data.data

            })
            .catch((err) => {
              console.log(err);
            });
      },
      btname:function(e){
        this.$axios({
            url: "/record/selectByname",
            method: "post", 
            data:{
              "name":this.inname,
            },
          })
            .then((res) => {
              this.tableData=res.data.data
            })
            .catch((err) => {
              console.log(err);
            });
      },
      btoaid:function(e){
        this.$axios({
            url: "/record/selectByoaid",
            method: "post", 
            data:{
              "oaid":this.inoaid,
            },
          })
            .then((res) => {
              this.tableData=res.data.data
            })
            .catch((err) => {
              console.log(err);
            });
      },
      btnote:function(e){
        this.$axios({
            url: "/record/selectBynote",
            method: "post", 
            data: {
              "note":this.innote,
            },
          })
            .then((res) => {
              this.tableData=res.data.data
            })
            .catch((err) => {
              console.log(err);
            });
      },
      btcontent:function(e){
        this.$axios({
            url: "/record/selectBycontent",
            method: "post", 
            data:{
              "content": this.incontent
            }
          })
            .then((res) => {
              this.tableData=res.data.data
            })
            .catch((err) => {
              console.log(err);
            });
      },
      handleClick(row) {
        console.log(row.id);
      }
    }
    
  };
</script>
<style>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  
  .el-aside {
    color: #333;
  }
</style>
